<template>
  <div class="tabbar">
    <TabBarItem v-for="item in tabList" :key="item.id" :path="item.path">
      <template v-slot:icon>
        <div class="icon">
          <span class="iconfont" :class="item.icon"></span>
        </div>
      </template>
        <template v-slot:text>
        <div class="text">{{item.name}}</div>
      </template>
    </TabBarItem>
  </div>
</template>

<script>
import TabBarItem from '../../components/tabBar/TabBarItem.vue'
export default {
  components: {
    TabBarItem
  },
  data () {
    return {
      tabList: [
        { name: '首页', icon: 'icon-home-fill', id: 1, path: '/index' },
        { name: '分类', icon: 'icon-all-fill1', id: 2, path: '/list' },
        { name: '灵感', icon: 'icon-credit-level-fill', id: 3, path: '/ins' },
        { name: '文章', icon: 'icon-integral-fill', id: 4, path: '/art' }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.tabbar{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1rem;
  background-color: #fff;
  border-top: .01rem solid #ccc;
  font-size: 0.30rem;
  display: flex;
  justify-content:space-between;
  padding: 0 0.4rem;
  box-sizing: border-box;
}
</style>
